<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>14-offset和position</title>
    <style>
        * { margin: 0px; }

        .div1 {
            position: absolute;
            width: 200px;
            height: 200px;
            top: 20px;
            left: 10px;
            background: blue;
        }

        .div2 {
            position: absolute;
            width: 100px;
            height: 100px;
            top: 50px;
            background: red;
        }

        .div3 {
            position: absolute;
            top: 250px;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script>
        $(function () {

            /**
             * 知识点：
             * 获取 / 设置标签的位置数据
             *      offset(): 相对页面左上角的坐标
             *      position(): 相对于父元素左上角的坐标
            */

            /**
             * 1. 点击 btn1
             *      打印 div1 相对于页面左上角的位置
             *      打印 div2 相对于页面左上角的位置
             *      打印 div1 相对于父元素左上角的位置
             *      打印 div2 相对于父元素左上角的位置
            */
            $('#btn1').click(function () {
                console.log($('.div1').offset())
                console.log($('.div2').offset())
                console.log($('.div1').position())
                console.log($('.div2').position())
            })

            /**
             * 2. 点击 btn2
             *      设置 div2 相对于页面的左上角的位置
            */
            $('#btn2').click(() => {
                $('.div2').offset({ 'left': 100, 'top': 100 })
            })
    
        })
    </script>
</head>

<body style="height: 2000px;">
    <div class="div1">
        <div class="div2">测试offset</div>
    </div>

    <div class='div3'>
        <button id="btn1">读取offset和position</button>
        <button id="btn2">设置offset</button>
    </div>
</body>

</html>